<template>
    <div class="home-category">
        <template v-for="(item) in categories" :key="item.id">
            <div class="category">
                <img :src="item.pictureUrl" alt="">
                <div class="category-text">{{item.title}}</div>
            </div>

        </template>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';


import useHomeStore from '@/stores/modules/homeStore'
import { storeToRefs } from 'pinia';

const homeStore = useHomeStore()
homeStore.getHotCategoryData()
const { categories } = storeToRefs(homeStore);
console.log(categories.value);


</script>

<style lang="less" scoped>
.home-category {
    display: flex;
    overflow-x: auto;
    padding-left: 18px;

    &::-webkit-scrollbar {
        display: none;
    }

    .category {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 18px 26px 8px 0px;

        img {
            width: 32px;
            height: 32px;
        }

        .category-text {
            font-size: 12px;
            color: #333;
            margin-top: 5px;
        }
    }
}
</style>